<template>
  <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
  <el-container style="height: 1000px; border: 1px solid #eee">
    <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
      >鞋稳定性指标分析工具</el-header
    >
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-message"></i>导航</template
            >

            <el-menu-item index="1-1">
              <router-link to="/cal" class="custom-link">计算界面</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link to="/settings" class="custom-link"
                >配置参数界面</router-link
              >
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <div style="display: flex; justify-content: flex-end">
          <el-button @click="playSound" type="danger" round>提示音</el-button>
        </div>
        <h1 style="text-align: center">计算界面</h1>
        <br />
        <br />

        <el-row>
          <el-col class="parameter-group" :span="6">
            <span class="parameter-label">触地角度(°)</span>
            <el-input
              v-model="touchAngle"
              readonly
              style="width: 120px"
            ></el-input>
          </el-col>
          <el-col class="parameter-group" :span="6">
            <span class="parameter-label">最大内翻角度IRA(°)</span>
            <el-input
              v-model="maxAngle"
              readonly
              style="width: 120px"
            ></el-input>
          </el-col>
          <el-col class="parameter-group" :span="6">
            <span class="parameter-label">最大外翻角度ERA(°)</span>
            <el-input
              v-model="minAngle"
              readonly
              style="width: 120px"
            ></el-input>
          </el-col>
          <el-col class="parameter-group" :span="6">
            <span class="parameter-label">内外翻范围RAR(°)</span>
            <el-input
              v-model="maxDiff"
              readonly
              style="width: 120px"
            ></el-input>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col class="parameter-group" :span="9">
            <span class="parameter-label">最大内翻角时刻(ms)</span>
            <el-input
              v-model="maxAngleTime"
              readonly
              style="width: 120px"
            ></el-input>
          </el-col>
          <el-col class="parameter-group" :span="9">
            <span class="parameter-label">最大内外翻时间差TIE(ms)</span>
            <el-input
              v-model="maxDiffInterval"
              readonly
              style="width: 120px"
            ></el-input>
          </el-col>
          <el-col class="parameter-group" :span="6">
            <span style="font-weight: bold; font-size: 18px">计算公式:</span>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col class="parameter-group" :span="9">
            <span class="parameter-label"
              >(内翻)峰值角速度<sub>peak</sub>(°/s)</span
            >
            <el-input
              v-model="minVelocity"
              readonly
              style="width: 120px"
            ></el-input>
          </el-col>
          <el-col class="parameter-group" :span="9">
            <span class="parameter-label"
              >(外翻)峰值角速度<sub>peak</sub>(°/s)</span
            >
            <el-input
              v-model="maxVelocity"
              readonly
              style="width: 120px"
            ></el-input>
          </el-col>

          <!-- //展示公式图片 -->
          <el-col class="parameter-group" :span="6">
            <img src="../../assets/formula.png" alt="图片" width="300px" />
          </el-col>
        </el-row>
        <br />
        <div
          style="border-top: 1px solid #ccc; height: 0; margin-top: 20px"
        ></div>
        <br />
        <el-row>
          <el-col class="parameter-group" :span="4">
            <span class="parameter-label">(脚)a击(g)</span>
            <el-input v-model="maxA" readonly style="width: 120px"></el-input>
          </el-col>
          <el-col class="parameter-group" :span="4">
            <span class="parameter-label">(小腿)a击(g)</span>
            <el-input
              v-model="maxALeg"
              readonly
              style="width: 120px"
            ></el-input>
          </el-col>
          <el-col class="parameter-group" :span="4">
            <span class="parameter-label">(脚)v击(m/s)</span>
            <el-input v-model="vHit" readonly style="width: 120px"></el-input>
          </el-col>
          <el-col class="parameter-group" :span="4">
            <span class="parameter-label">稳定性指标W</span>
            <el-input
              v-model="stabilityIndex"
              readonly
              style="width: 120px"
            ></el-input>
          </el-col>
          <el-col class="parameter-group" :span="4">
            <span class="parameter-label">安全系数</span>
            <el-input v-model="isSave" readonly style="width: 120px"></el-input>
          </el-col>
        </el-row>
        <br />
        <br />
        <el-button type="primary" plain @click="cal" align-items: center
          >计算</el-button
        >

        <!-- 历史数据组件 -->
        <el-button type="text" @click="dialogTableVisible = true"
          >历史记录</el-button
        >

        <el-dialog
          title="历史记录"
          :visible.sync="dialogTableVisible"
          width="85%"
        >
          <el-table :data="historyData" max-height="450">
            <el-table-column
              property="id"
              label="id"
              width="50"
            ></el-table-column>
            <el-table-column
              property="touchAngle"
              label="触地角度"
              width="90"
              align="center"
            ></el-table-column>
            <el-table-column
              property="maxAngle"
              label="最大内翻角"
              width="90"
              align="center"
            ></el-table-column>
            <el-table-column
              property="minAngle"
              label="最大外翻角"
              width="90"
              align="center"
            ></el-table-column>
            <el-table-column
              property="maxDiff"
              label="内外翻范围"
              width="90"
              align="center"
            ></el-table-column>
            <el-table-column
              property="maxAngleTime"
              label="最大内翻角时刻"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              property="maxDiffInterval"
              label="最大内外翻时间差"
              width="135"
              align="center"
            ></el-table-column>
            <el-table-column
              property="minVelocity"
              label="(内翻)峰值角速度"
              width="130"
              align="center"
            ></el-table-column>
            <el-table-column
              property="maxVelocity"
              label="(外翻)峰值角速度"
              width="130"
              align="center"
            ></el-table-column>
            <el-table-column
              property="maxA"
              label="(脚)a击"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              property="maxALeg"
              label="(小腿)a击"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              property="vHit"
              label="(脚)v击"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              property="stabilityIndex"
              label="稳定性指标"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              property="isSave"
              label="安全系数"
              width="90"
              align="center"
            ></el-table-column>

            <el-table-column label="操作" width="130">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, historyData)"
                  type="text"
                  size="small"
                >
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
        <div
          style="border-top: 1px solid #ccc; height: 0; margin-top: 20px"
        ></div>

        <br />
        <el-row>
          <el-col :span="12">
            <span style="font-weight: bold; font-size: 18px">文件选择</span>
          </el-col>
          <el-col :span="12">
            <span style="font-weight: bold; font-size: 18px">自定义截取</span>
          </el-col>
        </el-row>
        <br /><br />

        <!-- 文件下拉框组件 -->

        <el-row
          ><el-col class="parameter-group" :span="12">
            <span class="parameter-label" style="margin-left: 100px">日期</span>
            <el-select
              v-model="date"
              clearable
              style="width: 140px"
              @change="
                () => {
                  clearTime();
                  saveHidden();
                }
              "
              placeholder="请选择日期"
            >
              <el-option
                v-for="date in dateList"
                :key="date"
                :label="date"
                :value="date"
              ></el-option>
            </el-select>
          </el-col>
          <el-col class="parameter-group" :span="12">
            <span class="parameter-label" style="margin-left: 100px"
              >数据量</span
            >
            <el-input
              type="number"
              v-model="amountOfData"
              placeholder="默认为170"
              @change="saveHidden"
              style="width: 120px"
            ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="parameter-group" :span="12">
            <span class="parameter-label" style="margin-left: 100px">时间</span>
            <el-select
              v-model="time"
              @change="
                () => {
                  saveHidden();
                }
              "
              style="width: 140px"
              clearable
              placeholder="请选择时间"
            >
              <el-option
                v-for="time in getTimeByDate(this.date)"
                :key="time"
                :label="time"
                :value="time"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>

        <br /><br />

        <!-- <span style="font-weight: bold; font-size: 18px; color: #4285F4;">参数设置</span>
    <span style="font-weight: bold; font-size: 18px; background-color: #343A40; color: #FFFFFF;">参数设置</span> -->
        <!-- <span style="font-weight: bold; font-size: 18px; border: 2px solid #6C757D; padding: 5px;">参数设置</span> -->

        <div
          style="border-top: 1px solid #ccc; height: 0; margin-top: 20px"
        ></div>
        <br />
        <div id="chartContainer" style="height: 400px"></div>

        <!-- chart -->
        <el-button
          v-if="this.showLegFoot"
          type="text"
          @click="dialogChartVisible = true"
          >腿、脚曲线</el-button
        >

        <el-dialog
          title="腿、脚部曲线"
          :visible.sync="dialogChartVisible"
          @open="draw"
        >
          <div id="legChartContainer" style="height: 400px"></div>
          <div id="footChartContainer" style="height: 400px"></div>
        </el-dialog>

        <!-- 腿、脚、腿脚差曲线对比 -->
        <!-- echarts图 -->
        <!-- <el-button type="text" @click="chartShow = true"
          >腿、脚角度曲线</el-button
        > -->

        <!-- <div v-show="chartShow">
          <el-row>
            <el-col :span="12">
              <div id="legChartContainer" style="height: 400px"></div>
            </el-col>
            <el-col  :span="12">
              <div id="footChartContainer" style="height: 400px"></div>
            </el-col>

          </el-row>
       
        
        </div> -->

        <br />
        <!-- 保存副本组件，在计算后才会展示 -->
        <div v-if="this.isShow" class="parameter-group">
          <span class="parameter-label">副本及结果保存位置</span>
          <el-input
            v-model="path"
            style="width: 360px"
            placeholder="如:C:\Users\cifer\Desktop\工况1"
            clearable
          ></el-input>
          <el-button
            type="primary"
            style="margin-left: 20px"
            plain
            @click="saveData"
            >保存</el-button
          >
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
import sound from "../../assets/提示音(1).mp3";
export default {
  data() {
    return {
      //4.17新增a击、v击、触地时刻、触地角度、最大内翻角时刻、安全系数
      maxA: "",
      maxALeg: "",
      vHit: "",
      touchAngle: "",
      //定义为最大内翻时间与触地时间差
      maxAngleTime: "",
      isSave: "",

      //分别是最大、最小角度、最大最小角度差、最大最小角度时间间隔、角速度峰值、稳定性指标
      maxAngle: "",
      minAngle: "",
      maxDiff: "",
      maxDiffInterval: "",
      minVelocity: "",
      maxVelocity: "",
      stabilityIndex: "",

      angle: [],
      legAngle: [],
      footAngle: [],
      timeSequence: [],

      //处理文件选择需要的原始变量
      //下拉列表1
      dateList: [],
      //下拉列表2
      dateMap: {},
      //绑定下拉列表变量
      date: "",
      time: "",
      //保存副本组件是否展示flag
      isShow: false,
      //保存副本的文件路径变量
      path: "",
      //将echarts图表变量定义为成员变量
      myChart: null,
      //定义截取数据量
      amountOfData: 140,

      //保存历史记录的数组
      historyData: [],
      //控制对话框dialog显示的变量
      dialogTableVisible: false,
      dialogChartVisible: false,
      //用于记录实验次数
      count: 0,
      //用于控制腿脚曲线对话框按钮的开启与关闭
      showLegFoot: false,
    };
  },
  methods: {
    //定义方法区
    cal() {
      //计算前先验一下目前有效计算时的状态（日期、时间都空或都有值，数据量必须有且是合法值）
      if (this.date !== "" && this.time === "") {
        alert("时间未选择");
        return;
      }
      if (
        this.amountOfData === undefined ||
        this.amountOfData < 70 ||
        this.amountOfData > 200
      ) {
        alert("数据量异常，请控制在70~200以内");
        return;
      }

      //请求接口获取数据
      axios
        .get("http://127.0.0.1:8080/analyze", {
          params: {
            date: this.date,
            time: this.time,
            amountOfData: this.amountOfData,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            alert(res.data.msg);
            return;
          }
          let param = res.data.data;
          this.maxAngle = param.maxAngle.toFixed(3);
          this.minAngle = param.minAngle.toFixed(3);
          this.maxDiff = param.maxDiff.toFixed(3);
          this.maxDiffInterval = param.maxDiffInterval.toFixed(1);
          this.minVelocity = param.minVelocity.toFixed(3);
          this.maxVelocity = param.maxVelocity.toFixed(3);

          //stabilityIndex可能会是NaN
          if (isNaN(param.stabilityIndex)) {
            alert("W计算异常,请检查一下各计算部分!!");
            this.stabilityIndex = param.stabilityIndex;
          } else {
            //转换数量级e-6
            let t = (param.stabilityIndex * 1000000).toFixed(3);
            this.stabilityIndex = `${t}e-6`;
          }

          //4.17新增变量赋值
          this.maxA = param.maxA.toFixed(3);
          this.maxALeg = param.maxALeg.toFixed(3);
          this.vHit = param.vhit.toFixed(3);
          this.touchAngle = param.touchAngle.toFixed(3);
          this.maxAngleTime = (param.maxAngleTime - param.touchTime).toFixed(1);
          //打印一下触地时刻和最大内翻时刻
          console.log(`触地时间：${param.touchTime}`);
          console.log(`最大内翻时间：${param.maxAngleTime}`);
          this.isSave = param.isSave ? 1 : 0;

          this.angle = param.angle;
          this.legAngle = param.legAngle;
          this.footAngle = param.footAngle;
          this.timeSequence = param.timeSequence;
          // console.log("打印res.data.data");
          console.log(param);
          //历史数据填入
          //先让count加1
          this.count++;
          let record = {
            id: this.count,
            touchAngle: this.touchAngle,
            maxAngle: this.maxAngle,
            minAngle: this.minAngle,
            maxDiff: this.maxDiff,
            maxAngleTime: this.maxAngleTime,
            maxDiffInterval: this.maxDiffInterval,
            minVelocity: this.minVelocity,
            maxVelocity: this.maxVelocity,
            stabilityIndex: this.stabilityIndex,
            maxA: this.maxA,
            maxALeg: this.maxALeg,
            vHit: this.vHit,

            isSave: this.isSave ? 1 : 0,
          };
          this.historyData.push(record);

          // 主数据折线渲染
          const option = {
            title: {
              text: "后足角度", // 这里设置标题内容
              left: "center", // 标题的位置，可以根据需要调整
            },
            dataZoom: [
              {
                type: "inside", //放大缩小x轴数值
                // orient: "vertical",
                // 加了这个为y轴的放大与缩小
              },
              {
                // start: 0,//默认为0
                // end: 100,//默认为100
                type: "slider",
                show: true,
                // xAxisIndex: [0],
                handleSize: 0, //滑动条的 左右2个滑动条的大小
                startValue: 0, // 初始显示值
                endValue: 500000, // 结束显示值,自己定
                height: 5, //组件高度
                left: "10%", //左边的距离
                right: "10%", //右边的距离
                bottom: 15, //底边的距离
                borderColor: "#ccc",
                fillerColor: "#4cccfe",
                borderRadius: 5,
                backgroundColor: "#efefef", //两边未选中的滑动条区域的颜色
                showDataShadow: false, //是否显示数据阴影 默认auto
                showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                realtime: true, //是否实时更新
                filterMode: "filter",
              },
            ],
            //两边的截取线

            xAxis: {
              type: "category",
              data: this.timeSequence,
              name: "时间(ms)",
              nameLocation: "middle", // 标题位置，这里设置为中间
              nameGap: 45, // 标题与轴线的间距
            },
            yAxis: {
              type: "value",
              axisLabel: {
                formatter: "{value}°",
              },
              name: "角度(°)", // 设置纵坐标标题
              nameLocation: "middle", // 标题位置，这里设置为中间
              nameGap: 30, // 标题与轴线的间距
            },
            series: [
              {
                data: this.angle,
                type: "line",
              },
            ],
            // 添加图形配置项，用于绘制两条垂直截取线
          };
          this.myChart.setOption(option);
        });

      //将后端的结果拿到后展示、图形渲染好后，显示保存文件输入框
      this.isShow = true;
      this.showLegFoot = true;
      //每次计算完乘机将向后端发起申请，拿到dir
      this.getDir();
    },
    playSound() {
      console.log("进入播放音频方法");
      const audio = new Audio(sound);
      console.log("创建 Audio 对象成功");
      audio.play();
      console.log("调用 play 方法");
    },
    getTimeByDate(date) {
      console.log(this.dateMap[date]);
      console.log("获取时间成功");
      return this.dateMap[date] || [];
    },
    clearTime() {
      this.time = "";
      //日期变动，除让time为空串外，还要隐藏掉保存选项
      // this.saveHidden();
    },
    saveHidden() {
      this.isShow = false;
    },

    //从数组中找目标元素并返回下标，并告知起始位置
    findIndex(list, target, start) {
      for (let i = start; i < list.length; i++) {
        if (list[i] > target) {
          return i;
        }
      }
    },

    //保存文件方法
    saveData() {
      axios
        .post("http://127.0.0.1:8080/copy", {
          //配置参数
          path: this.path,
          date: this.date,
          time: this.time,
          //计数
          count: this.count,
          //待保存参数
          touchAngle: this.touchAngle,
          maxAngle: this.maxAngle,
          minAngle: this.minAngle,
          maxDiff: this.maxDiff,
          maxDiffInterval: this.maxDiffInterval,
          maxAngleTime: this.maxAngleTime,
          minVelocity: this.minVelocity,
          maxVelocity: this.maxVelocity,
          maxA: this.maxA,
          maxALeg: this.maxALeg,
          vhit: this.vHit,
          stabilityIndex: this.stabilityIndex,
          isSave: this.isSave,
          angle: this.angle,
        })
        .then((res) => {
          console.log(res.data);
          if (res.data.code == 0) {
            alert(res.data.msg);
            return;
          } else if (res.data.code == 1) {
            alert("保存成功！");
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
    //dialog里的删除一行的方法
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //dialog画图方法
    draw() {
      this.$nextTick(() => {
        //副折线图渲染
        let legChartContainer = document.getElementById("legChartContainer");
        let legChart = echarts.init(legChartContainer);

        const optionLeg = {
          title: {
            text: "腿部", // 这里设置标题内容
            left: "center", // 标题的位置，可以根据需要调整
          },
          xAxis: {
            type: "category",
            data: this.timeSequence,
            name: "时间(ms)",
            nameLocation: "middle", // 标题位置，这里设置为中间
            nameGap: 25, // 标题与轴线的间距
          },
          yAxis: {
            type: "value",
            axisLabel: {
              formatter: "{value}°",
            },
            name: "角度(°)", // 设置纵坐标标题
            nameLocation: "middle", // 标题位置，这里设置为中间
            nameGap: 30, // 标题与轴线的间距
          },
          series: [
            {
              data: this.legAngle,
              type: "line",
            },
          ],
          // 添加图形配置项，用于绘制两条垂直截取线
        };
        legChart.setOption(optionLeg);

        let footChartContainer = document.getElementById("footChartContainer");
        let footChart = echarts.init(footChartContainer);
        const optionFoot = {
          title: {
            text: "脚部", // 这里设置标题内容
            left: "center", // 标题的位置，可以根据需要调整
          },
          xAxis: {
            type: "category",
            data: this.timeSequence,
            name: "时间(ms)",
            nameLocation: "middle", // 标题位置，这里设置为中间
            nameGap: 25, // 标题与轴线的间距
          },
          yAxis: {
            type: "value",
            axisLabel: {
              formatter: "{value}°",
            },
            name: "角度(°)", // 设置纵坐标标题
            nameLocation: "middle", // 标题位置，这里设置为中间
            nameGap: 30, // 标题与轴线的间距
          },
          series: [
            {
              data: this.footAngle,
              type: "line",
            },
          ],
          // 添加图形配置项，用于绘制两条垂直截取线
        };
        footChart.setOption(optionFoot);
      });
    },
    getDir() {
      //一加载立即执行，向服务器发起请求获取map
      axios.get("http://127.0.0.1:8080/dirs").then((res) => {
        var responseData = res.data.data;

        const dates = Object.keys(responseData);
        this.dateList = dates;
        this.dateMap = responseData;
      });
    },
  },
  mounted() {
    //初始要初始化echarts图表
    const chartContainer = document.getElementById("chartContainer");
    this.myChart = echarts.init(chartContainer);
    // const legChartContainer = document.getElementById("legChartContainer");
    // this.legChart = echarts.init(legChartContainer);
    // const footChartContainer = document.getElementById("footChartContainer");
    // this.footChart = echarts.init(footChartContainer);
    this.getDir();
  },
};
</script>

<style scoped>
.el-input + .el-button {
  margin-left: 20px; /* 调整这个值来设置水平距离 */
}

.parameter-group {
  /* 
    设置元素的布局方式为 flex（弹性布局）。
    这将使该容器内的子元素可以根据 flex 属性进行布局和排列。
  */
  display: flex;
  /* 
    垂直对齐方式为居中。
    确保容器内的子元素在垂直方向上居中对齐。
  */
  align-items: center;
  /* 
    底部外边距为 10 像素。
    为这个容器与下方的元素之间添加一定的间隔。
  */
  margin-bottom: 10px;
}

.parameter-label {
  /* 给字体的span调整宽度 */
  width: 190px;
  text-align: right;
  margin-right: 10px;
}

.minParameter {
  margin-right: 10px;
  font-size: 18px;
}

.el-input {
  width: 50px;
}
/* 导航链接样式 */
.custom-link {
  text-decoration: none; /* 去除下划线 */
  color: inherit; /* 使用默认颜色 */
}
</style>